<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
    #pop {
        position: absolute;
        left: 100px;
        top: 250px;
        width: 200px;
        height: 100px;
        z-index: 999;
        background-color: aliceblue;
        padding: 20px;
    }
</style>
<body>
<div id="app">
    <div id="add">
        商品名称：<input type="text" v-model="addGoods.name"/>
        商品数量：<input type="text" v-model="addGoods.number"/>
        商品价格：<input type="text" v-model="addGoods.price"/>
        商品产地：<select name="made" id="" v-model="addGoods.made">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="福州">福州</option>
        <option value="莆田">莆田</option>
        <option value="厦门">厦门</option>
    </select>
        <button type="button" @click="add">添加</button>
    </div>
    <div id="search">
        <input type="text" v-model="searchStr">
        <button @click="search">搜索</button>
    </div>
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>产地</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr v-for="(g,index) in tempGoods">
            <td>{{g.name}}</td>
            <td>{{g.number}}</td>
            <td>{{g.made}}</td>
            <td>{{g.price}}</td>
            <td>
                <input type="button" @click="update(index)" value="修改"/>
                <input type="button" @click="remove(index)" value="删除"/>
            </td>
        </tr>
    </table>

    <div id="pop" v-show="popShow">
        商品名称：<input type="text" v-model="changeGoodsName"/>
        <button type="button" @click="updateGoods">确定</button>
        <button type="button" @click="close">取消</button>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            popShow: false,
            goods: [
                {name: '小米手机', number: '10', made: '北京', price: 1999},
                {name: '小米手机', number: '10', made: '北京', price: 1999},
                {name: '小米手机', number: '10', made: '北京', price: 1999},
                {name: '小米手机', number: '10', made: '北京', price: 1999},
            ],
            tempGoods:[],
            addGoods: {name: '', number: '', made: '', price: ''},
            changeGoodsName: '',
            changeGoodsIndex: '',
            searchStr: ''
        },
        methods: {
            remove(index) {
                this.goods.splice(index, 1);
            },
            update(index) {
                this.changeGoodsIndex = index;
                this.changeGoodsName = this.goods[index].name
                this.popShow = true
            },
            updateGoods() {
                this.goods[this.changeGoodsIndex].name = this.changeGoodsName
                alert("修改成功")
                this.close()
            },
            close() {
                this.popShow = false;
            },
            add() {
                addGoods = this.addGoods
                this.goods.unshift(addGoods)
                this.addGoods = {name: '', number: '', made: '', price: ''}
            },
            search() {
                var tempGoods=this.tempGoods
                tempGoods=this.goods

                this.tempGoods = tempGoods.filter((item) => {
                    if (item.name.indexOf(this.searchStr) != -1) {
                        return item
                    }
                })
                // return goods;
            }
        },

        mounted(){
            this.tempGoods=this.goods
        }

    })
</script>
